import React, { useEffect, useRef } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import { Col, Row, Card, Statistic, Calendar } from 'antd';
import { SolutionOutlined, TeamOutlined, WalletOutlined, TableOutlined } from '@ant-design/icons'
import * as echarts from 'echarts';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN'
export default function DashBoard() {
  const onPanelChange = (value, mode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };
  // 初始化地图
  let map = null;
  const initMap = () => {
    AMapLoader.load({
      "key": "f579df58dc9a00ea84e51da05f8c24de",
      "version": "2.0",
      "plugins": ['AMap.PlaceSearch', 'AMap.Geolocation'],
    }).then((AMap) => {
      map = new AMap.Map('map', {
        zoom: 15
      });
      // 标记点
      const marker = new AMap.Marker({
        title: '安徽博物馆',
        position: [117.275133, 31.863486]
      })
      map.add(marker)
      var placeSearch = new AMap.PlaceSearch({
        city: '合肥'
      });
      placeSearch.search('spa', (status, result) => {
        console.log(result);
      })
      // 创建定位插件
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: 'RB'
      })

      geolocation.getCurrentPosition(function (status, result) {
        console.log(status);
        console.log(result);
      })
    }).catch(e => {
      console.log('地图初始化失败');
    })
  }
  // 初始化echarts
  const chartRef = useRef();
  let chart = null;
  const initChart = () => {
    chart = echarts.init(chartRef.current);
    // 设置配置项
    chart.setOption({
      title: {
        text: '课程'
      },
      tooltip: {
        axisPointer: {
          type: 'cross'
        },
        trigger: 'axis',
      },
      xAxis: {
        data: ['钢琴', '篮球', '滑板', '滑冰', '绘画', '声乐', '舞蹈']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5000, 2000, 3600, 1000, 1000, 2000, 809]
        }
      ]
    })
  }
  useEffect(() => {
    initMap();
    initChart();
  }, [])
  return (
    <Card title="主页">
      <Row gutter={10}>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="学员数"
                value={360}
                valueStyle={{ color: '#40c9c6' }}
                prefix={<SolutionOutlined />}
              // suffix="%"
              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="总课时"
                value={11489}
                valueStyle={{ color: '#36a3f7' }}
                prefix={<TableOutlined />}
              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="师资人数"
                value={36}
                valueStyle={{ color: '#34bfa3' }}
                prefix={<TeamOutlined />}
              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="本月报名（万元）"
                value={25}
                valueStyle={{ color: '#f4516c' }}
                prefix={<WalletOutlined />}
              />
            </Card>
          </div>
        </Col>
      </Row>
      <Calendar onPanelChange={onPanelChange} style={{ marginTop: 50 }} locale={locale} />
      <Row>
        <Col span={12}>
          <div id='map' style={{ height: 400, marginTop: 50 }}></div>
        </Col>
        <Col span={12}>
          <div ref={chartRef} style={{ height: 400, marginTop: 50, marginLeft: 20 }}></div>
        </Col>
      </Row>
    </Card>
  )
}

